<script setup lang="tsx">
import { useData } from 'vitepress'

interface MobileDemoProps {
  name: string
}
defineProps<MobileDemoProps>()

const { site } = useData()
</script>

<template>
  <div class="demo-wrapper" ref="demo">
    <div class="demo-code">
      <slot name="code" />
    </div>
    <div class="demo-preview">
      <iframe :src="`${site.base}demo/${$props.name}?v=${Date.now()}`" />
    </div>
  </div>
</template>

<style>
.demo-wrapper {
  display: flex;
}
.demo-code {
  flex: auto;
  width: 0;
  > div[class*='language-'] {
    margin: 0;
    height: 667px;
    border-end-end-radius: 0;
    border-start-end-radius: 0;
    border: 1px solid var(--vp-c-border);

    > pre {
      height: 100%;
    }
  }
}
.demo-preview {
  flex: none;
  width: 375px;
  height: 667px;
  border: 1px solid var(--vp-c-border);
  border-radius: 0 8px 8px 0;
  border-left: none;
  overflow: hidden;
  display: flex;
  background-color: #fff;

  > iframe {
    flex: 1;
    border: 0;
  }
}
@media screen and (max-width: 768px) {
  .demo-code {
    display: none;
  }
}
</style>
